<template>
  <div class="cart">
    <top-bar  jump="/cart"></top-bar>
    <div id="app">
      <table class="table" >
        <tr>
          <td style="width:10%">
            <span v-if="isSelectAll == false"  @click="selectAll(),select=!select"><img src="../assets/images/icon_select.png">全选</span>
            <span v-else @click="selectNone(),select=!select"><img src="../assets/images/car.png">全选</span>
          </td>
          <td>商品信息</td>
          <td>单价</td>
          <td>数量</td>
          <td>金额</td>
          <td>操作</td>
        </tr>
        <tr v-for="(goods, index) in goodsList" :key="index">
          <td>
            <span v-if="goods.select==false"  @click="goods.select=!goods.select"><img src="../assets/images/icon_select.png"></span>
            <span v-else  @click="goods.select=!goods.select"><img src="../assets/images/car.png"></span>
          </td>
          <td class="">

              <div class="left"><img src="../assets/images/car.png" style="width: 1rem;height: 1rem;"/></div>
              <div class="right">
                <h5 style="">{{goods.name}}</h5>
                <!-- <p>品牌：{{goods.brand}}  产地:{{goods.location}}</p> -->
                <!-- <p>规格/纯度:{{goods.size}}  起定量:{{goods.number}}</p> -->
                <!-- <p>配送仓储:{{goods.send}}</p> -->
              </div>
          </td>
          <td>￥{{goods.price | centToFen}}</td>
          <td>
            <a class="btn" @click="goods.num <= 100 ? 100 : goods.num--"  >-</a>
            <input type="text" class="numbers" v-model="goods.num" style="text-align: center;"/>
            <a class="btn" @click="goods.num++">+</a>
          </td>
          <!-- <td>{{goods.price}}</td> -->
          <td>￥{{goods.num*goods.price | centToFen}}</td>
          <td><a class="btn btn-danger" @click="deleteOne(index)">移除</a></td>
        </tr>
      </table>

      <p style="float: left;margin-left:1rem;margin-top:.08rem"><a class="btn btn-danger" @click="deleteGoods()">删除选中商品</a></p>
      <p class="total">
        <span>已选商品{{getTotal.totalNum}}种</span>
        <span>数量：{{getTotal.totalsum}}</span>
        <span>合计（不含运费）：{{getTotal.totalPrice | centToFen}}</span>
        <el-button class="button" :plain="true" type="primary" @click="gotos()">结算</el-button>
      </p>
    </div>
    <v-footer style="position:relative; top:.2rem; "></v-footer>
  </div>
</template>

<script>
import topBar from './topbar'
import footer from './footer'
// import {commitPrice} from '../service/api'
export default {
  data () {
    return {
      select: false,
      totalPrice: '',
      goodsList: [
        {
          name: '新生儿疾病筛查型Neonatal screening type',
          price: 888,
          num: 100
        },
        {
          name: '雪碧',
          price: 398,
          num: 100
        },
        {
          name: '芬达',
          price: 499,
          num: 100
        },
        {
          name: '美年达',
          price: 297,
          num: 100
        }
      ]
    }
  },
  methods: {
    selectAll: function () {
      for (var i = 0; i < this.goodsList.length; i++) {
        this.goodsList[i].select = true
      }
    },
    selectNone: function (index) {
      for (var i = 0; i < this.goodsList.length; i++) {
        this.goodsList[i].select = false
      }
    },
    deleteOne: function (index) {
      this.goodsList.splice(index, 1)
    },
    deleteGoods: function () {
      this.goodsList = this.goodsList.filter(function (item) { return !item.select })
    },
    async gotos () {
      if (!this.getTotal.totalNum) {
        this.$message({
          message: '请至少选择一件商品',
          iconClass: 'icon-hide'
        })
        alert('请至少选择一件商品')
      } else {
        this.$router.push('/sort')
      }
    }
    // closes () {
    //   commitPrice(this.select, this.totalPrice).then(d => {
    //     if (d.code === 200) {
    //       this.$message({
    //         message: '结算成功'
    //       })
    //     }
    //   })
    // }
  },
  computed: {
    isSelectAll: function () {
      // <!--如果每一条数据的select都为true，返回true，否则返回false;-->
      return this.goodsList.every(function (val) { return val.select })
    },
    getTotal: function () {
      // <!--获取goodsList中select为true的数据。-->
      var _proList = this.goodsList.filter(function (val) { return val.select })
      var totalPrice = 0
      var totalsum = 0
      for (var i = 0, len = _proList.length; i < len; i++) {
        // <!--总价累加-->
        totalPrice += _proList[i].num * _proList[i].price
        totalsum += _proList[i].num
      }
      // <!--选择产品的件数就是_proList.length，总价就是totalPrice-->
      return {totalNum: _proList.length, totalPrice: totalPrice, totalsum: totalsum}
    }

  },
  mounted: function () {
    var _this = this
    this.goodsList.map(function (goods) {
      _this.$set(goods, 'select', false)
      console.log('_this.', _this.$set(goods, 'select', false))
    })
  },
  components: {
    topBar,
    'v-footer': footer
  }
}
</script>

<style scoped lang="less">
@import "../assets/less/cart.less";
</style>
